<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>

</head>
<body>

<div id="app">

    <input v-model="info"/><br/>

    <input v-model="user.name"/>

</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            info: "刘德华",
            user: {
                id: 10086,
                name: "张学友"
            }
        },
        //当前watch只能监控data中声明的对象
        watch: {
            info(val, oldVal) {//可以没有参数，如果有一个参数表示新值，第二个参数表示旧的值
                console.log("info:" + val + ",,,," + oldVal)
            },

            user:{
                deep:true,//深度监控，不仅监控对象的引用地址变化，还要监控对象中属性的内容的变化
                handler(val){//当变化后会自动执行调用,传入一个参数是最新的对象
                    console.log(val)
                }
            }
        }

    });
</script>


</body>
</html>